<template>
	<xh-container
		title="工作台"
		hideBack
	>
		<!-- 宫格组件 -->
		<uni-section
			title="系统管理"
			type="line"
		></uni-section>
		<view class="grid-body">
			<uni-grid
				:column="4"
				:showBorder="false"
				@change="changeGrid"
			>
				<uni-grid-item :index="0">
					<view class="grid-item-box">
						<uni-icons
							type="person-filled"
							size="30"
						></uni-icons>
						<text class="text">用户管理</text>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="1">
					<view class="grid-item-box">
						<uni-icons
							type="staff-filled"
							size="30"
						></uni-icons>
						<text class="text">角色管理</text>
					</view>
				</uni-grid-item>
				<!-- <uni-grid-item :index="2">
					<view class="grid-item-box">
						<uni-icons
							type="settings"
							size="30"
						></uni-icons>
						<text class="text">菜单管理</text>
					</view>
				</uni-grid-item> -->
			</uni-grid>
		</view>
	</xh-container>
</template>

<script>
export default {
	name: 'myWork',
	data() {
		return {
			current: 0,
			swiperDotIndex: 0,
			sysMenuList: [
				{ name: '用户管理', key: 0 },
				{ name: '角色管理', key: 1 },
				// { name: '菜单管理', key: 2 },
				// { name: '部门管理', key: 3 },
				// { name: '岗位管理', key: 4 },
				// { name: '字典管理', key: 5 },
				// { name: '参数设置', key: 6 },
				// { name: '通知公告', key: 7 },
				// { name: '日志管理', key: 8 },
			],
		};
	},
	methods: {
		clickBannerItem(item) {
			console.info(item);
		},
		changeSwiper(e) {
			this.current = e.detail.current;
		},
		changeGrid(e) {
			const index = e.detail?.index;
			const routerPath = {
				0: '/subSysManage/userManage/index',
				1: '/subSysManage/roleManage/index',
				// 2: '/subSysManage/menuManage/index',
			};
			if (routerPath[index]) {
				this.$nav.navigateTo(routerPath[index]);
			} else {
				this.$modal.showToast('模块建设中~');
			}
		},
	},
};
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
}

/* #endif */

.text {
	text-align: center;
	font-size: 26rpx;
	margin-top: 10rpx;
}

.grid-item-box {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
}

.swiper {
	height: 300rpx;
}

.swiper-box {
	height: 150px;
}

.swiper-item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	height: 300rpx;
	line-height: 300rpx;
}

@media screen and (min-width: 500px) {
	.uni-swiper-dot-box {
		width: 400px;
		/* #ifndef APP-NVUE */
		margin: 0 auto;
		/* #endif */
		margin-top: 8px;
	}

	.image {
		width: 100%;
	}
}
</style>
